<template>
  <ActionSheet v-model="show">
    <div class="filtrate">
      <div class="radio">
        <div class="top flex items-center justify-between">
          <div class="name">数据状态（单选）</div>
          <div class="action flex items-center" @click="resetData()">
            <img :src="resetIcon" width="16px" height="16px" alt="" /> 重置筛选
          </div>
        </div>
        <div class="content-tab">
          <div
            class="tab"
            :class="radioIndex == item.key ? 'activ' : null"
            v-for="item in data.followTypeList"
            :key="item.key"
            @click="radioFn(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="radio multiple">
        <div class="top">
          <div class="name">外出状态（多选）</div>
        </div>
        <div class="content-tab">
          <div
            class="tab"
            :class="outMultipleIndexs.includes(item.key) ? 'activ' : null"
            v-for="item in data.statusList"
            :key="item.key"
            @click="goOutMultipleFn(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 日期 -->
      <div class="date-select" @click="opentimeFilter">
        <div class="top">
          <div class="name">外出时间</div>
        </div>
        <div class="timeInput mt-12px">
          <div class="date ml-14px">{{ goOutTime || "选择外出时间" }}</div>
          <img
            :src="DateIcon"
            class="mr-9px"
            width="14px"
            height="14px"
            alt=""
          />
        </div>
      </div>
      <!-- 跟进状态（多选） -->
      <div class="radio follow-multiple">
        <div class="top">
          <div class="name">跟进状态（多选）</div>
        </div>
        <div class="content-tab">
          <div
            class="tab"
            :class="followMultipleIndexs.includes(item.key) ? 'activ' : null"
            v-for="item in data.outTypeList"
            :key="item.key"
            @click="followMultipleFn(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <timeFilter ref="timeFilter" @submitTime="submitTime" @closeDate="open">
      </timeFilter>
      <!-- 底部 -->
      <div class="footer-fiexd">
        <div class="footer flex items-center">
          <button type="button" @click="_close" class="toolbar__cancel">
            取消
          </button>
          <div class="toolbar__line"></div>
          <button type="button" @click="_confirm" class="toolbar__confirm">
            确定
          </button>
        </div>
      </div>
    </div>
  </ActionSheet>
</template>

<script>
import { ActionSheet } from "vant";
import bus from "@/config/evenrBus";
import DateIcon from "@/assets/icon/date.png";
import resetIcon from "@/assets/workbench/goout/reset.png";
import timeFilter from "@/components/ll_time_filter";

export default {
  components: {
    ActionSheet,
    timeFilter,
  },
  props: {
    echoSelect: {
      type: Object,
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      show: false,
      goOutTime: "",
      getGoOutTime: {}, //保存时间对象
      radioIndex: null, //外出类型（单选）
      outMultipleIndexs: [], //外出状态（多选）
      followMultipleIndexs: [], //跟进状态（多选）
      DateIcon,
      resetIcon,
      selectConfirmList: null, //筛选后的数据
    };
  },
  mounted() {
    bus.$on("goOut_FilterShow", (res) => {
      this.show = res;
      if (this.echoSelect) {
        this.getSelectedDataActiv();
      }
    });
  },
  methods: {
    getSelectedDataActiv() {
      let res = this.echoSelect;
      let outMultipleIndexs = [];
      let outTypeList = [];
      //回显示数据
      Object.keys(res).forEach((item) => {
        for (let index = 0; index < res[item].length; index++) {
          if (item == "statusList") {
            //数据状态（单选）
            outMultipleIndexs.push(res[item][index].key);
          }
          if (item == "followTypeList") {
            //外出状态（多选）
            this.radioIndex = res[item][index].key;
          }
          if (item == "outTypeList") {
            //跟进状态（多选）
            outTypeList.push(res[item][index].key);
          }
          if (item == "goOutTime") {
            //外出时间
            this.goOutTime = res[item][index].name;
            this.getGoOutTime = res[item][index].showTime; //关闭后回显时间
          }
        }
      });
      this.followMultipleIndexs = outTypeList;
      this.outMultipleIndexs = outMultipleIndexs;
    },
    open() {},
    opentimeFilter() {
      //回显示时间
      if (JSON.stringify(this.echoSelect) != "{}") {
        this.$refs.timeFilter.open(this.getGoOutTime);
      } else {
        this.$refs.timeFilter.open();
      }
    },
    // 单选选中
    radioFn(item) {
      this.radioIndex = item.key;
    },
    // 外出状态选中
    goOutMultipleFn(row) {
      if (this.outMultipleIndexs.includes(row.key)) {
        for (let i = 0; i < this.outMultipleIndexs.length; i++) {
          if (this.outMultipleIndexs[i] == row.key) {
            this.outMultipleIndexs.splice(i, 1);
          }
        }
      } else {
        this.outMultipleIndexs.push(row.key);
      }
    },
    //跟进状态选中
    followMultipleFn(row) {
      if (this.followMultipleIndexs.includes(row.key)) {
        for (let i = 0; i < this.followMultipleIndexs.length; i++) {
          if (this.followMultipleIndexs[i] == row.key) {
            this.followMultipleIndexs.splice(i, 1);
          }
        }
      } else {
        this.followMultipleIndexs.push(row.key);
      }
    },
    //确定且过滤数据
    _confirm() {
      // 传递后台参数
      let params = {
        followTypeList: this.selectRadioFilter(
          //待办事项类型
          this.data.followTypeList,
          this.radioIndex
        ),
        statusList: this.selectDataFilter(
          //待办事项状态
          this.data.statusList,
          this.outMultipleIndexs
        ),
        outTypeList: this.selectDataFilter(
          //跟进状态
          this.data.outTypeList,
          this.followMultipleIndexs
        ),
        goOutTime: this.goOutTime //时间
          ? [
              {
                id: "goOutTime",
                name: this.goOutTime,
                showTime: this.getGoOutTime,
              },
            ]
          : [],
      };
      this.selectConfirmList = params; //用于回显示
      bus.$emit("goOut_selectDataFilterList", params); //向显示框传参数
      this.show = false;
      this.$emit("selectConfirm", params); //父页面传参数
    },
    // 单选
    selectRadioFilter(listData, listIndexs) {
      let filter = [];
      for (var i = 0; i < listData.length; i++) {
        if (listIndexs == listData[i].key) {
          filter.push(listData[i]);
        }
      }
      return filter;
    },
    //复选
    selectDataFilter(listData, listIndexs) {
      let filter = [];
      for (var i = 0; i < listData.length; i++) {
        if (listIndexs.includes(listData[i].key)) {
          filter.push(listData[i]);
        }
      }
      return filter;
    },
    resetData() {
      this.radioIndex = [];
      this.outMultipleIndexs = [];
      this.followMultipleIndexs = [];
      this.goOutTime = null;
    },
    _close() {
      if (this.echoSelect.length > 0) {
        if (this.echoSelect.followTypeList.length <= 0) {
          this.radioIndex = "";
        }
        if (this.echoSelect.goOutTime.length <= 0) {
          this.goOutTime = "";
          this.getGoOutTime = {};
        }
      }
      if (JSON.stringify(this.echoSelect) == "{}") {
        this.radioIndex = ""; //取消外出状态
        /**
         * 取消外出时间和选择的原始数据
         */
        this.goOutTime = "";
        this.getGoOutTime = {};
      }
      this.show = false;
    },
    submitTime(value) {
      this.goOutTime = value.showVisitTime[0] + " 至 " + value.showVisitTime[1];
      this.getGoOutTime = value;
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}

.filtrate {
  padding: 20px 16px 0 16px;
  .radio {
    .name {
      height: 20px;
      line-height: 20px;
      @include minxi-fontstyle(14px, 500, #333333);
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .action {
      width: 76px;
      height: 20px;
      font-size: 12px;
      font-family: SFPro-RegularItalic, SFPro;
      font-weight: normal;
      color: #1d6fe9;
      line-height: 20px;
    }
    .content-tab {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      .tab {
        width: 81px;
        height: 32px;
        background: #f5f5f5;
        border-radius: 16px;
        @include minxi-fontstyle(12px, 400, #333333);
        line-height: 32px;
        text-align: center;
        margin-right: 6px;
        border: 1px solid #f5f5f5;
        margin-bottom: 12px;
      }
      .tab:nth-child(4) {
        margin-right: 0;
      }
      .activ {
        font-weight: 600;
        background: rgba(29, 111, 233, 0.1);
        border-radius: 16px;
        border: 1px solid #1d6fe9;
        color: #1d6fe9;
      }
    }
  }
  .multiple,
  .date-select,
  .follow-multiple {
    margin-top: 32px;
  }
  .date-select {
    .name {
      height: 20px;
      line-height: 20px;
      @include minxi-fontstyle(14px, 500, #333333);
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .timeInput {
      width: 339px;
      height: 32px;
      background: #f5f5f5;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .date {
        @include minxi-fontstyle(12px, 400, #333333);
      }
    }
  }
  .follow-multiple {
    .content-tab {
      .tab {
        width: 106px;
        margin-right: 12px;
      }
      .tab:nth-child(4) {
        margin-right: 12px;
      }
      .tab:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .footer-fiexd {
    height: calc(50px + env(safe-area-inset-bottom));
    min-height: 50px;
    .footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(50px + env(safe-area-inset-bottom));
      min-height: 50px;
      background: #ffffff;
      box-shadow: 0px -1px 1px 0px #f5f5f5;
      display: flex;
      .toolbar__cancel {
        width: 50%;
        height: 100%;
        @include minxi-fontstyle(14px, 500, #666666);
      }
      .toolbar__line {
        width: 1px;
        height: 20px;
        background: #f0f0f0;
      }
      .toolbar__confirm {
        width: 50%;
        height: 100%;
        @include minxi-fontstyle(14px, 500, #1d6fe9);
      }
    }
  }
}
</style>
